<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import type { InventorySlotItem } from '../../../../game/model/inventory/type';
import { ITEM_TYPE } from '../../../../game/data/item/type';
import { ItemReader } from '../../../../game/systems/item/reader';
import { rarityTextColorClass } from '../../../../utils';
import { AttributesReader } from '../../../../game/systems/attributes/reader';
import { ATTRIBUTE_TYPE_ORDER } from '../../../../game/model/attributes/type';
import EquipmentSlot from '../components/slot.vue';
import { EVENTS, GameKernel } from '../../../../game';

const open = ref(false);
const currentEquipmentIns = ref<InventorySlotItem | null>(null);

const currentEquipmentConfig = computed(() => {
  if (!currentEquipmentIns.value) return null;
  const config = ItemReader.getConfig(currentEquipmentIns.value.itemId);
  if (!config || config.type !== ITEM_TYPE.EQUIPMENT) return null;
  return config;
});

const comparedAttributes = computed(() => {
  const currentAttrs =
    currentEquipmentIns.value?.payload?.equip?.baseAttrs || [];

  const currentAttrMap = new Map();
  currentAttrs.forEach((attr) => {
    currentAttrMap.set(attr.prop, attr.value);
  });

  // 合并所有出现的属性类型，确保顺序一致
  const allProps = new Set([...currentAttrs.map((attr) => attr.prop)]);

  const sortedProps = Array.from(allProps).sort((a, b) => {
    const indexA = ATTRIBUTE_TYPE_ORDER.indexOf(a);
    const indexB = ATTRIBUTE_TYPE_ORDER.indexOf(b);

    if (indexA !== -1 && indexB !== -1) {
      return indexA - indexB;
    }

    if (indexA !== -1) return -1;
    if (indexB !== -1) return 1;

    return a.localeCompare(b);
  });

  return sortedProps
    .map((prop) => {
      const currentValue = currentAttrMap.get(prop) || 0;

      return {
        prop,
        name: AttributesReader.getAttributeName(prop),
        currentValue,
      };
    })
    .filter((attr) => attr.currentValue !== 0); // 过滤掉值为0的属性
});

function show(item: InventorySlotItem) {
  currentEquipmentIns.value = item;
  open.value = true;
}

function close() {
  open.value = false;
}

function onUnEquipmentClick() {
  if (!currentEquipmentIns.value) return;
  GameKernel.inst.bus.emit(
    EVENTS.EQUIPMENT_PANEL_UNEQUIP,
    currentEquipmentIns.value
  );
}

onMounted(() => {
  GameKernel.inst.bus.on(EVENTS.EQUIPMENT_PANEL_UNEQUIP_COMPLETED, () => {
    close();
  });
});

defineExpose({
  show,
  close,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    :wrap-class-name="['backpack-modal'].join(' ')"
    :centered="true"
    :closable="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <a-card v-if="currentEquipmentIns && currentEquipmentConfig" size="small">
      <div class="flex gap-2">
        <div class="flex-none">
          <equipment-slot :equipment="currentEquipmentIns">
            <div v-if="currentEquipmentConfig">
              {{ currentEquipmentConfig.name }}
            </div>
          </equipment-slot>
          <div class="text-center text-xs pt-1">
            [{{
              ItemReader.getEquipSlotName(currentEquipmentConfig.equipSlot)
            }}]
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-center">
            <div
              v-if="currentEquipmentIns.payload?.equip?.rarity"
              :class="
                rarityTextColorClass(currentEquipmentIns.payload.equip.rarity)
              "
            >
              【{{
                ItemReader.getItemRarityName(
                  currentEquipmentIns.payload?.equip?.rarity
                )
              }}】{{ currentEquipmentConfig.name }}
            </div>
          </div>
          <div class="w-1/2">
            <div
              v-for="attr in comparedAttributes"
              :key="attr.prop"
              class="flex items-center justify-between pl-2"
            >
              <div>{{ attr.name }}</div>
              <div class="flex items-center">
                <div>{{ attr.currentValue }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="currentEquipmentConfig.canSell !== false"
        class="flex items-center justify-end text-xs"
      >
        <div>出售价格：</div>
        <div>{{ currentEquipmentConfig.basePrice }}</div>
      </div>
    </a-card>
    <div class="pt-2">
      <div class="flex items-center justify-center gap-2">
        <a-button @click="onUnEquipmentClick">卸下</a-button>
      </div>
    </div>
  </a-modal>
</template>

<style>
.backpack-modal .ant-modal .ant-modal-content {
  padding: 8px;
}
.hidden-title .ant-modal .ant-modal-header {
  display: none;
}
</style>
